<!-- 喜爱偏好 -->
<template>
    <view>
        <status-bar title='喜爱偏好' :goHome='fromShare'></status-bar>
        <view class="size32 color_44 text-center padding30">分类偏好预测</view>
        <bubble :raw-data="pageData.category"></bubble>
        <view class="padding50-30 bor_bot_D9">
            <view class="cateItem d-flex a-center m-bot30" v-for="(item,index) in pageData.category" :key="index">
                <view class="block" :style="{background: colors[index]}"></view>
                <view class="flex-1 m-left24">
                    <view class="d-flex j-sb m-bot10">
                        <text class="size26 color_22">{{ item.name }}</text>
                        <text class="size26" :style="{color: colors[index]}">{{ item.percent }}%</text>
                    </view>
                    <u-line-progress :percentage="item.percent" :activeColor="colors[index]" :showText="false" height="5"></u-line-progress>
                </view>
            </view>
        </view>
        <view class="size32 color_44 text-center p-top40 p-bot10">商品偏好预测</view>
        <view class="p-left30 p-right30 p-bot40">
            <view class="goodsItem d-flex j-sb p-top30 p-bot30 bor_bot_D9" v-for="(item,index) in pageData.goods" :key="index"
                @click="toGoods(item.goods_id)">
                <view class="d-flex flex-1">
                    <image :src="$imgUrls(item.img)" mode="aspectFill" class="img f-shrink-0"></image>
                    <view class="padding15 d-flex f-column j-sb">
                        <view class="size28 color_11 ellipsis">{{ item.name }}</view>
                        <view class="size26 bold" style="color: #FF640F;">￥{{ item.price }}</view>
                    </view>
                </view>
                <view class="d-flex f-column j-sb a-end m-left10">
                    <view class="h7 color_66">预测</view>
                    <view class="size32 bold" style="color: #EB1010;">{{ item.percent }}%</view>
                    <view class="p-re" @click.stop="shareItem = item">
                        <text class="iconfont icon-fenxiang size28 color_99 bold"></text>
                        <!-- 点击share分享按钮时会触发onShareAppMessage -->
                        <button open-type="share" class="btn-contact"></button>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import bubble from '../components/bubble'
import { mapState } from 'vuex'
export default {
    data(){
        return {
            fromShare: 0,
            colors: ['#6473FF','#35B1FF','#6896FF','#A1CFFF','#35E0FF','#A9CDFF','#98E6FF','#99F4FF','#3687FF'],
            guest_id: '',
            pageData: '',
            shareItem: {}
        }
    },
    computed: {
        ...mapState(['vid'])
    },
    components: {
        bubble
    },
    onLoad(e){
        if(e.guest_id) this.guest_id = e.guest_id
        this.initData()
    },
    methods: {
        initData(){
            this.$http.get({
                url: '/PrivateSphereApi/guestHobby',
                data: {
                    guest_id: this.guest_id
                }
            }).then(res=>{
                if(res.code != 200) return this.$Toast(res.msg)
                this.pageData = res.data
            })
        }
    },
    onShareAppMessage(){
        return {
            title: this.shareItem.name,
            desc: this.shareItem.info,
            path: `/pages/index/index?share_v_id=${this.vid}&pageType=10&gid=${this.shareItem.goods_id}&w=2&pid=${this.vid}`,
            imageUrl: this.$imgUrls(this.shareItem.img)
        }
    }
}
</script>

<style lang="scss" scoped>
.cateItem {
    .block {
        width: 24rpx;
        height: 24rpx;
    }
    &:last-child {
        margin-bottom: 0;
    }
}
.goodsItem {
    .img {
        width: 120rpx;
        height: 120rpx;
    }
}
.bor_bot_D9 {
    border-bottom: 1rpx solid #D9D9D9;
}
</style>